<template>
  <div>
    <el-table :data="foodList" stripe border>
      <el-table-column label="预览图" width="180px">
        <template slot-scope="scope">
          <el-image style="width: 150px; height: 100px" :src="imageBaseUrl + scope.row.icon + '.jpg'" fit="scale-down">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="菜品名" prop="fname"></el-table-column>
      <el-table-column label="菜品详情" prop="detail"></el-table-column>
      <el-table-column label="评分" prop="comment" width="150px">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.comment" disabled text-color="#ff9900">
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-check" size="mini" @click="showFood(scope.row.fid)">查看菜品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'FoodList',
  data () {
    return {
      queryInfo: {
        rid: window.sessionStorage.getItem('rid'),
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      foodList: [],
      total: 0,
      imageBaseUrl: this.$axios.defaults.baseURL + 'static/image/'
    }
  },
  created () {
    this.getFoodList()
  },
  methods: {
    // 当每页显示的最大数据条数发生变化时，调用该函数
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getFoodList()
    },
    // 当当前页数发生变化时，调用该函数
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getFoodList()
    },
    showFood (fid) {
      this.$router.push({ name: 'FoodDetails', params: { fid: fid, rid: this.queryInfo.rid } })
    },
    async getFoodList () {
      const { data: res } = await this.$axios.get('/user/restaurant/getFoods', { params: this.queryInfo })
      if (res.status !== 2000) {
        return this.$message.error('获取菜品失败')
      }
      this.foodList = res.data.foods
      this.total = res.data.total
    }
  },
  watch: {
    $route (to) {
      if (to.path !== '/user/other') {
        window.sessionStorage.removeItem('rid')
      }
    }
  }
}
</script>

<style scoped>

</style>
